<template>
  <div class="login-container">
    <van-image width="100vw" height="100vh" fit="cover" :src="require('../../assets/login_bg.png')" />
    <van-image class="login-title" fit="contain" :src="require('../../assets/ic_login_logo.png')" />
    <div class="login-box">
      <van-field v-model="phone" placeholder="请输入手机号" clearable type="tel" maxlength="11" class="login-account" />

      <van-field v-model="pwd" placeholder="请输入密码" clearable type="password" class="login-pwd" />

      <van-button round color="linear-gradient(to right, #007FFD, #00D8FF)" class="login-btn" @click="toLogin">
        登录
      </van-button>
    </div>
    <span class="login-unit">潍坊市自然资源和规划局</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { login, getUserInfo } from '@/api'

export default {
  components: {},
  data() {
    return {
      phone: '',
      pwd: ''
    }
  },
  computed: {
    ...mapGetters(['getNativeApi', 'getNativeCallJs', 'getToken'])
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getNativeCallJs.registerNativieGoBack(() => {
        vm.goBack()
      })
    })
  },
  created() {
    this.getNativeApi.setStatusBarColor('#00FFFFFF')
    this.getNativeApi.setStatusBarLightMode(false)
    this.phone = localStorage.getItem('phone') || ''
    this.pwd = localStorage.getItem('pwd') || ''
  },
  methods: {
    toLogin() {
      if (!this.isValidPhone(this.phone)) {
        this.$toast('手机号格式错误')
        return
      }
      if (!this.pwd) {
        this.$toast('请输入密码')
        return
      }
      const params = {
        logintype: 'App',
        username: this.phone,
        password: this.pwd
      }
      login(params)
        .then(res => {
          this.$store.dispatch('user/setTokenAction', res.data)
          this.getUserInfo()
        })
        .catch(err => {
          this.$toast(err.message)
        })
    },
    getUserInfo() {
      getUserInfo()
        .then(res => {
          console.log('userInfo : ', res.data)
          localStorage.setItem('phone', this.phone)
          localStorage.setItem('pwd', this.pwd)
          this.$store.dispatch('user/setUserInfoAction', res.data)
          this.$router.replace('/home')
        })
        .catch(err => {
          this.$toast(err.message)
        })
    },
    isValidPhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
    goBack() {
      this.$toast({
        message: '再次滑动退出app'
      })
      if (!this.first) {
        this.first = Date.now()
        setTimeout(() => {
          this.first = 0
        }, 1000)
      } else {
        if (Date.now() - this.first < 1000) {
          this.getNativeApi.closeApp()
          console.log('退出登录')
          this.first = 0
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.login-title {
  position: absolute;
  top: 21.5vh;
  left: 30px;
  right: 30px;
}
.login-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .login-account {
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
      -2px 2 0px 0px #ffffff,
      inset -2px 2 0px 0px #ffffff;
    border-radius: 8px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(40px);
    height: 48px;
  }
  .login-pwd {
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
      -2px 2 0px 0px #ffffff,
      inset -2px 2 0px 0px #ffffff;
    border-radius: 8px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(40px);
    margin-top: 20px;
    height: 48px;
  }
  .login-btn {
    margin-top: 40px;
    font-weight: 800;
    font-size: 18px;
    color: #ffffff;
    height: 48px;
  }
}

.login-unit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8.6vh;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
}
::v-deep .van-cell {
  line-height: 26px;
}
</style>
